<template>
  <div class="mavon-look-box">
    <mavon-editor 
      v-model="val" 
      ref="md"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :ishljs="true"
      class="mavon-editor2" />
  </div>
</template>

<script>
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
// markdown-it对象：md.s_markdown, md => mavonEditor实例
//                 or
//                 mavonEditor.markdownIt 
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)



export default {
  name: 'MarkdownEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    }
  },
  data() {
    return {
      val: ''
    }
  },
  watch: {
    value(val) {
      console.log(val)
      this.val = val
    }
  },
  mounted() {
    // console.log(this.$refs.md.$img2Url)
    
    this.val = this.value
  },
  methods: {
    
  }
}
</script>

<style scoped lang="less">
.mavon-look-box{
  height: 100%;
  /deep/ .shadow img{
    position: initial;
  }
}
.mavon-editor{
  height: 100%;
}
</style>
